import React, { useEffect } from "react";
import { useIntl } from "umi";
import {
  Modal,
  Row,
  Col,
  Card,
  Tag,
  Divider,
  Descriptions,
  Typography,
  Button,
  Space,
} from "antd";
import { ApiLogRespVO } from "../../types";
import dayjs from "dayjs";
import { formatToLocalTime, toUTC } from "@/utils/time";


const { Title, Text } = Typography;

interface CreateModalProps {
  visible: boolean;
  values?: ApiLogRespVO;
  onCancel: () => void;
  onSuccess: () => void;
}

const AddForm: React.FC<CreateModalProps> = ({
  visible,
  values,
  onCancel,
  onSuccess,
}) => {
  const intl = useIntl();

  // 格式化时间显示
  const formatTime = (timeString: string) => {
    if (!timeString) return "-";
    return dayjs.utc(timeString).local().format("YYYY-MM-DD HH:mm:ss");
  };

  // 判断状态码类型
  const getStatusCodeType = (statusCode: string) => {
    if (!statusCode) return "default";
    const code = parseInt(statusCode);
    if (code >= 200 && code < 300) return "success";
    if (code >= 400 && code < 500) return "warning";
    if (code >= 500) return "error";
    return "default";
  };

  // 判断HTTP方法类型
  const getMethodType = (method: string) => {
    if (!method) return "default";
    switch (method.toUpperCase()) {
      case "GET":
        return "blue";
      case "POST":
        return "green";
      case "PUT":
        return "orange";
      case "DELETE":
        return "red";
      default:
        return "default";
    }
  };

  return (
    <Modal
  title={intl.formatMessage({ id: "api.log.modal.title" })}
  width={1000}
  open={visible}
  onCancel={onCancel}
  footer={[
    <Button key="close" onClick={onCancel}>
      {intl.formatMessage({ id: "api.log.modal.close" })}
    </Button>,
  ]}
  bodyStyle={{ padding: "16px 24px" }}
>
  {/* 底部基本信息 */}
  <Row>
    <Col span={24}>
      <Card
        size="small"
        title={intl.formatMessage({ id: "api.log.basic.info" })}
        headStyle={{ backgroundColor: "#f9f0ff" }}
      >
        <Descriptions column={3} size="small">
          <Descriptions.Item label={intl.formatMessage({ id: "api.log.log.id" })}>
            {values?.olId || "-"}
          </Descriptions.Item>
          <Descriptions.Item label={intl.formatMessage({ id: "api.log.order.code" })}>
            {values?.orderCode || "-"}
          </Descriptions.Item>
          <Descriptions.Item label={intl.formatMessage({ id: "api.log.reference.no" })}>
            {values?.referenceNo || "-"}
          </Descriptions.Item>
        </Descriptions>
      </Card>
    </Col>
  </Row>

  <Divider style={{ margin: "16px 0" }} />

  <Row gutter={24}>
    {/* 左侧 - 请求信息 */}
    <Col span={12}>
      <Card
        title={intl.formatMessage({ id: "api.log.request.info" })}
        size="small"
        headStyle={{ backgroundColor: "#e6f7ff", fontWeight: "bold" }}
        bodyStyle={{ padding: "12px" }}
      >
        <Space direction="vertical" size="small" style={{ width: "100%" }}>
          {/* 请求方法 - 标签和值在同一行 */}
          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
            <Text strong style={{ fontSize: "12px", minWidth: "60px" }}>
              {intl.formatMessage({ id: "api.log.request.method" })}:
            </Text>
            {values?.method ? (
              <Tag color={getMethodType(values.method)} style={{ margin: 0 }}>
                {values.method}
              </Tag>
            ) : (
              <Text style={{ fontSize: "12px" }}>-</Text>
            )}
          </div>

          {/* 请求URL - 标签和值在同一行，支持自动换行 */}
          <div style={{ display: "flex", alignItems: "flex-start", gap: "8px" }}>
            <Text
              strong
              style={{
                fontSize: "12px",
                minWidth: "60px",
                lineHeight: "1.4",
                paddingTop: "2px",
              }}
            >
              {intl.formatMessage({ id: "api.log.request.url" })}:
            </Text>
            <Text
              style={{
                fontFamily: "monospace",
                fontSize: "12px",
                wordBreak: "break-all",
                wordWrap: "break-word",
                whiteSpace: "normal",
                flex: 1,
                lineHeight: "1.4",
                backgroundColor: "#f9f9f9",
                padding: "4px 6px",
                borderRadius: "3px",
                border: "1px solid #d9d9d9",
              }}
            >
              {values?.requestUrl || "-"}
            </Text>
          </div>

          {/* 请求时间 - 标签和值在同一行 */}
          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
            <Text strong style={{ fontSize: "12px", minWidth: "60px" }}>
              {intl.formatMessage({ id: "api.log.request.time" })}:
            </Text>
            <Text style={{ fontSize: "12px" }}>
              {values?.requestTime ? formatToLocalTime(values?.requestTime) : "-"}
            </Text>
          </div>

          {/* 请求头 - 保持原有布局（标签在上，内容在下） */}
          <div>
            <Text
              strong
              style={{
                display: "block",
                marginBottom: 4,
                fontSize: "12px",
              }}
            >
              {intl.formatMessage({ id: "api.log.request.headers" })}
            </Text>
            <div
              style={{
                maxHeight: "120px",
                overflow: "auto",
                backgroundColor: "#f9f9f9",
                padding: "8px",
                fontFamily: "monospace",
                fontSize: "12px",
                borderRadius: "4px",
                border: "1px solid #d9d9d9",
              }}
            >
              <pre style={{ margin: 0, whiteSpace: "pre-wrap" }}>
                {values?.requestHeaders || "-"}
              </pre>
            </div>
          </div>

          {/* 请求体 - 保持原有布局（标签在上，内容在下） */}
          <div>
            <Text
              strong
              style={{
                display: "block",
                marginBottom: 4,
                fontSize: "12px",
              }}
            >
              {intl.formatMessage({ id: "api.log.request.body" })}
            </Text>
            <div
              style={{
                maxHeight: "200px",
                overflow: "auto",
                backgroundColor: "#f9f9f9",
                padding: "8px",
                fontFamily: "monospace",
                fontSize: "12px",
                borderRadius: "4px",
                border: "1px solid #d9d9d9",
              }}
            >
              <pre style={{ margin: 0, whiteSpace: "pre-wrap" }}>
                {values?.requestBody || "-"}
              </pre>
            </div>
          </div>
        </Space>
      </Card>
    </Col>

    {/* 右侧 - 响应信息 */}
    <Col span={12}>
      <Card
        title={intl.formatMessage({ id: "api.log.response.info" })}
        size="small"
        headStyle={{ backgroundColor: "#f6ffed", fontWeight: "bold" }}
        bodyStyle={{ padding: "12px" }}
      >
        <Space direction="vertical" size="small" style={{ width: "100%" }}>
          {/* 状态码 - 标签和值在同一行 */}
          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
            <Text strong style={{ fontSize: "12px", minWidth: "60px" }}>
              {intl.formatMessage({ id: "api.log.status.code" })}:
            </Text>
            {values?.statusCode ? (
              <Tag
                color={getStatusCodeType(values.statusCode)}
                style={{ margin: 0 }}
              >
                {values.statusCode}
              </Tag>
            ) : (
              <Text style={{ fontSize: "12px" }}>-</Text>
            )}
          </div>
             {/* 耗时 - 标签和值在同一行 */}
          <div style={{ display: "flex", alignItems: "center", gap: "px" }}>
            <Text strong style={{ fontSize: "12px", minWidth: "60px" }}>
              {intl.formatMessage({ id: "api.log.cost.time" })}:
            </Text>
            <Text style={{ fontSize: "12px" }}>
              {values?.costTime ? `${values.costTime} ms` : "-"}
            </Text>
          </div>
          {/* 响应时间 - 标签和值在同一行 */}
          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
            <Text strong style={{ fontSize: "12px", minWidth: "60px" }}>
              {intl.formatMessage({ id: "api.log.response.time" })}:
            </Text>
            <Text style={{ fontSize: "12px" }}>
              {values?.responseTime ? formatToLocalTime(values?.responseTime) : "-"}
            </Text>
          </div>        

          {/* 错误信息 - 保持原有布局（标签在上，内容在下） */}
          <div>
            <Text
              strong
              style={{
                display: "block",
                marginBottom: 4,
                fontSize: "12px",
              }}
            >
              {intl.formatMessage({ id: "api.log.error.msg" })}
            </Text>
            <div
              style={{
                maxHeight: "80px",
                overflow: "auto",
                backgroundColor: "#fff2f0",
                padding: "8px",
                fontFamily: "monospace",
                fontSize: "12px",
                borderRadius: "4px",
                border: "1px solid #ffccc7",
              }}
            >
              <pre style={{ margin: 0, whiteSpace: "pre-wrap" }}>
                {values?.errorMsg || "-"}
              </pre>
            </div>
          </div>

          {/* 响应体 - 保持原有布局（标签在上，内容在下） */}
          <div>
            <Text
              strong
              style={{
                display: "block",
                marginBottom: 4,
                fontSize: "12px",
              }}
            >
              {intl.formatMessage({ id: "api.log.response.body" })}
            </Text>
            <div
              style={{
                maxHeight: "200px",
                overflow: "auto",
                backgroundColor: "#f9f9f9",
                padding: "8px",
                fontFamily: "monospace",
                fontSize: "12px",
                borderRadius: "4px",
                border: "1px solid #d9d9d9",
              }}
            >
              <pre style={{ margin: 0, whiteSpace: "pre-wrap" }}>
                {values?.responseBody || "-"}
              </pre>
            </div>
          </div>
        </Space>
      </Card>
    </Col>
  </Row>
</Modal>
  );
};

export default AddForm;
